package pages

import (
	"github.com/templui/templui/internal/ui/layouts"
	"github.com/templui/templui/internal/ui/modules"
	"github.com/templui/templui/internal/ui/showcase"
)

templ Button() {
	@layouts.DocsLayout(
		"Button",
		"Interactive element that triggers actions when clicked.",
		[]modules.TableOfContentsItem{
			{
				ID:   "installation",
				Text: "Installation",
			},
			{
				ID:   "examples",
				Text: "Examples",
				Children: []modules.TableOfContentsItem{
					{
						ID:   "sizes",
						Text: "Sizes",
					},
					{
						ID:   "primary",
						Text: "Primary",
					},
					{
						ID:   "secondary",
						Text: "Secondary",
					},
					{
						ID:   "destructive",
						Text: "Destructive",
					},
					{
						ID:   "outline",
						Text: "Outline",
					},
					{
						ID:   "ghost",
						Text: "Ghost",
					},
					{
						ID:   "link",
						Text: "Link",
					},
					{
						ID:   "icon",
						Text: "Icon",
					},
					{
						ID:   "with_icon",
						Text: "With Icon",
					},
					{
						ID:   "loading",
						Text: "Loading",
					},
				},
			},
			{
				ID:   "api",
				Text: "API Reference",
				Children: []modules.TableOfContentsItem{
					{
						ID:   "button",
						Text: "Button",
					},
				},
			},
		},
	) {
		@modules.PageWrapper(modules.PageWrapperProps{
			Name:        "Button",
			Description: templ.Raw("Interactive element that triggers actions when clicked."),
			Tailwind:    true,
			Breadcrumbs: modules.Breadcrumbs{
				Items: []modules.BreadcrumbItem{
					{
						Text: "Docs",
						Path: "/docs",
					},
					{
						Text: "Components",
						Path: "/docs/components",
					},
					{
						Text: "Button",
					},
				},
			},
		}) {
			@modules.ExampleWrapper(modules.ExampleWrapperProps{
				ShowcaseFile:    showcase.ButtonDefault(),
				PreviewCodeFile: "button_default.templ",
			})
			@modules.ContainerWrapper(modules.ContainerWrapperProps{
				Title: "Installation",
				ID:    "installation",
			}) {
				@modules.ComponentUsage(modules.ComponentUsageProps{
					ComponentName: "button",
				})
			}
			@modules.ContainerWrapper(modules.ContainerWrapperProps{
				Title: "Examples",
				ID:    "examples",
			}) {
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Sizes",
					ShowcaseFile:    showcase.ButtonSizes(),
					PreviewCodeFile: "button_sizes.templ",
					ID:              "sizes",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Primary",
					ShowcaseFile:    showcase.ButtonPrimary(),
					PreviewCodeFile: "button_primary.templ",
					ID:              "primary",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Secondary",
					ShowcaseFile:    showcase.ButtonSecondary(),
					PreviewCodeFile: "button_secondary.templ",
					ID:              "secondary",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Destructive",
					ShowcaseFile:    showcase.ButtonDestructive(),
					PreviewCodeFile: "button_destructive.templ",
					ID:              "destructive",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Outline",
					ShowcaseFile:    showcase.ButtonOutline(),
					PreviewCodeFile: "button_outline.templ",
					ID:              "outline",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Ghost",
					ShowcaseFile:    showcase.ButtonGhost(),
					PreviewCodeFile: "button_ghost.templ",
					ID:              "ghost",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Link",
					ShowcaseFile:    showcase.ButtonLink(),
					PreviewCodeFile: "button_link.templ",
					ID:              "link",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Icon",
					ShowcaseFile:    showcase.ButtonIcon(),
					PreviewCodeFile: "button_icon.templ",
					ID:              "icon",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "With Icon",
					ShowcaseFile:    showcase.ButtonWithIcon(),
					PreviewCodeFile: "button_with_icon.templ",
					ID:              "with_icon",
				})
				@modules.ExampleWrapper(modules.ExampleWrapperProps{
					SectionName:     "Loading",
					ShowcaseFile:    showcase.ButtonLoading(),
					PreviewCodeFile: "button_loading.templ",
					ID:              "loading",
				})
			}
			@modules.ContainerWrapper(modules.ContainerWrapperProps{
				Title: "API Reference",
				ID:    "api",
			}) {
				@modules.APILegend()
				<div id="button" class="mb-8">
					@modules.APITable(modules.APITableProps{
						Title:       "Button",
						Description: "Interactive button component with multiple variants and states.",
						Items: []modules.APITableItem{
							{
								Name:        "ID",
								Type:        "string",
								Default:     "",
								Description: "Unique identifier for the button element.",
								Required:    false,
							},
							{
								Name:        "Class",
								Type:        "string",
								Default:     "",
								Description: "Additional CSS classes to apply to the button.",
								Required:    false,
							},
							{
								Name:        "Attributes",
								Type:        "templ.Attributes",
								Default:     "",
								Description: "Additional HTML attributes to apply to the button element.",
								Required:    false,
							},
							{
								Name:        "Variant",
								Type:        "Variant",
								Default:     "default",
								Description: "Visual style variant. Options: 'default', 'destructive', 'outline', 'secondary', 'ghost', 'link'.",
								Required:    false,
							},
							{
								Name:        "Size",
								Type:        "Size",
								Default:     "default",
								Description: "Button size. Options: 'default', 'sm', 'lg', 'icon'.",
								Required:    false,
							},
							{
								Name:        "FullWidth",
								Type:        "bool",
								Default:     "false",
								Description: "Whether the button should take full width of its container.",
								Required:    false,
							},
							{
								Name:        "Href",
								Type:        "string",
								Default:     "",
								Description: "URL for link buttons. When provided, renders an anchor tag instead of button.",
								Required:    false,
							},
							{
								Name:        "Target",
								Type:        "string",
								Default:     "",
								Description: "Target attribute for link buttons (e.g., '_blank').",
								Required:    false,
							},
							{
								Name:        "Disabled",
								Type:        "bool",
								Default:     "false",
								Description: "Whether the button is disabled and non-interactive.",
								Required:    false,
							},
							{
								Name:        "Type",
								Type:        "Type",
								Default:     "button",
								Description: "HTML button type. Options: 'button', 'submit', 'reset'.",
								Required:    false,
							},
						},
					})
				</div>
			}
		}
	}
}
